<script lang="ts" setup>
import type { loginFormType, loginResData } from "./type";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import request from "@/utils/request";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const loginFormRef = ref(null);
const loginForm = reactive<loginFormType>({
  username: "214804002",
  password: "123456",
});
const loginRules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});

const submitForm = () => {
  (loginFormRef.value as any).validate((valid: Boolean) => {
    if (valid) {
      request
        .post<loginFormType, loginResData>("/user/login", loginForm)
        .then((res) => {
          // 第一个泛型参数loginFormType：这通常用于指定请求体的类型。
          // 第二个泛型参数loginResData：这通常用于指定响应体的类型。这意味着你期望从服务器返回的响应体是一个符合loginResData接口或类型的对象
          if (res.code == "200") {
            store.commit("changeUserInfo", res.data);
            store.commit("changeGetterRouter", false);
            router.push("/");
          }
        })
        .catch((err) => {
          throw err;
        });
    }
  });
};
</script>
<template>
  <div class="box">
    <el-form
      ref="loginFormRef"
      style="max-width: 500px"
      :model="loginForm"
      status-icon
      :rules="loginRules"
      class="demo-ruleForm"
    >
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="username" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
      </el-form-item>
      <div class="button-box">
        <el-button type="primary" @click="submitForm()"> 登录 </el-button>
        <el-button type="success">注册</el-button>
      </div>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.box {
  background: linear-gradient(to right, rgb(56, 214, 201), rgb(129, 245, 180));
  height: 100vh;
  .demo-ruleForm {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .button-box {
      display: flex;
      justify-content: space-between;
      .el-button {
        width: 50%;
      }
    }
  }
}
</style>
@/utils/axios.config